<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	template="template.xhtml">
	
	<ui:define name="content">
	
		<h:form prependId="false">
			<p:panel header="Search Vehicles">
				<h:panelGrid columns="3">
					<h:outputText value="Reg Num: " />
					<p:autoComplete value="#{manageVehicles.regNum}" completeMethod="#{manageVehicles.getVehiclesByRegNum}"/>
					<p:commandButton value="Search" actionListener="#{manageVehicles.search}"/>
				</h:panelGrid>
			</p:panel>
			<p:dataTable id="vehicle"  var="vehicle" value="#{manageVehicles.vehicles}" rows="5" paginator="true" 
                         selection="#{manageVehicles.selectedVehicles}" selectionMode="multiple">
                
                <p:column sortBy="#{vehicle.vehCharRegno}" filterBy="#{vehicle.vehCharRegno}">
					<f:facet name="header">
						<h:outputText value="Reg Num:" /> 
					</f:facet>
					<h:outputText value="#{vehicle.vehCharRegno}"></h:outputText>
				</p:column>
                
                <p:column>
					<f:facet name="header">
						<h:outputText value="Make:" />
					</f:facet>
					<h:outputText value="#{vehicle.vehCharMake}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Model:" />
					</f:facet>
					<h:outputText value="#{vehicle.vehCharModel}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Insurance:" />
					</f:facet>
					<h:outputText value="#{vehicle.vehCharInsurance}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Insurance Expiry Date:" />
					</f:facet>
					<h:outputText value="#{vehicle.vehDateInsurexpiry}"></h:outputText>
				</p:column>
				
				 <p:column style="width: 20px;">
                    <p:button outcome="viewVehicle" value="Edit">
                        <f:param name="vehicleId" value="#{vehicle.vehNumId}" />
                    </p:button>
                    
                  </p:column>
				
			</p:dataTable>
			<br />
		</h:form>
	</ui:define>

</ui:composition>